<template>
  <div v-loading="loading" class="item">
    <el-checkbox v-model="checked" @change="selAll">全选</el-checkbox>
    <el-checkbox-group v-model="checkList">
      <template v-for="item in list">
        <el-checkbox :label="item" :key="item"></el-checkbox>
      </template>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      checkList: [],
      checked: false,
      loading: false,
    };
  },
  methods: {
    selAll(val) {
      if (val) {
        this.selChecked();
      } else {
        this.checkList = [];
      }
    },
    selChecked(val) {
      let index = val ? val : 1;
      this.loading = true;
      requestAnimationFrame(() => {
        let target = index + 50;
        for (; index < target; index++) {
          this.checkList.push(index);
        }
        if (index < 1000) {
          this.selChecked(index);
        } else {
          this.loading = false;
        }
      });
    },
    add(val) {
      this.loading = true;
      let index = val ? val : 1;
      requestAnimationFrame(() => {
        let target = index + 200;
        for (; index < target; index++) {
          this.list.push(index);
        }
        if (index < 1000) {
          this.add(index);
        } else {
          this.loading = false;
        }
      });
    },
  },
  mounted() {
    this.add();
  },
};
</script>

<style lang="less" scoped>
.item {
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
